.right-list{
    width: 300px;
    box-shadow: 0 0 8px black;
    margin: 20px;
    border-radius: 6px;
}
.right-list .item{
    height: 40px;
    line-height: 40px;
    padding: 0px 10px;
    border-bottom: 1px solid #dedede;
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.my-switch .switch-btn,
.my-switch>span {
    vertical-align: middle;
}

.my-switch {
    font-size: 10px;
    white-space: nowrap;
    display: inline-block;
}

.my-switch>span {
    display: inline-block;
    height: 2em;
    line-height: 2em;
    padding: 0px 10px;
    font-weight: bold;
}

.my-switch>span.active {
    color: #57a8fb;
}

.switch-btn {
    display: inline-block;
    width: 4em;
    height: 2em;
    border-radius: 2em;
    cursor: pointer;
    user-select: none;
    background-color: #dcdfe6;
    box-shadow: 0 0 4px #8d8d8e inset;
    transition: all 150ms ease;
}

.switch-btn.active {
    background-color: #57a8fb;
    box-shadow: 0 0 4px #3c75ad inset;
    ;
}

.switch-btn>input[type="checkbox"] {
    display: none;
}

.switch-btn .pot {
    display: inline-block;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    transform: scale(0.76);
    background-color: white;
    box-shadow: 0 0 4px #afafaf;
    transition: all 200ms ease;
}

.switch-btn>input[type="checkbox"]:checked+.pot {
    margin-left: 50%;
}
.right-list .right-switch{
    font-size: 14px;
}